<template>
  <div class="reply-box">
    <el-input v-model="commentText" :placeholder="placeholder"></el-input>
    <button class="commentBtn" @click="onclick_comment" :disabled="!commentText.trim().length">评论</button>
  </div>
</template>

<script>
  export default {
    name: "ReplyBox",
    props: ['placeholder'],
    data() {
      return {
        commentText: ""
      }
    },
    methods: {
      onclick_comment() {
        this.$emit("onreply", this.commentText)
      }
    }
  }
</script>

<style scoped lang="less">
  .reply-box {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background-color: #fafbfc;
  }

  .commentBtn {
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 8px;
    padding: .5rem 1.3rem;
    font-size: 1rem;
    color: #fff;
    background-color: #027fff;
    border-radius: 2px;

    &:disabled {
      cursor: default;
      opacity: .4;
    }
  }
</style>
